import { XmNavbar, XmNoData, XmPullRefresh, XmTabbar } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useState } from "react";
import { Tabs } from "@taroify/core";
import { View, Text } from "@tarojs/components";
import { Router } from "@/path/router";
import { getButtonTxt, onRefund } from "@/pages/bussiness/untils";
import { usePagingQuery } from "@/path/hooks";
import { orderList } from "@/path/api/common";
import { TypeOrderList } from "@/path/api/common/type";
import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import { XmToast } from "@/components/public";
import "./index.scss"
function Index() {
  const [tabVal, setTabVal] = useState<TypeOrderList.TypeType>("never_use")
  const tabList: { type: TypeOrderList.TypeType, title: string }[] = [
    { type: "never_use", title: "未使用" },
    { type: "used", title: "已使用" },
    { type: "refund", title: "已退款" },
    { type: "all", title: "全部" },
  ]
  const { pagingInfo, refresh, setPagingParams, initPagingQuery, loadPagingMore } = usePagingQuery(orderList, { type: tabVal })
  const toVerificationTicket = (val: TypeOrderList.Item) => {
    const _btnTxt = getButtonTxt(val)
    if (_btnTxt?.text === "已核销") {
      Router.toOrderRecordUser({ no: val.no }).then(() => {
        refresh()
      })
    } else if (_btnTxt?.canUse || !_btnTxt) {
      Router.toVerificationTicket(val).then(() => {
        refresh()
      })
    } else {
      XmToast.open(_btnTxt.text)
    }
  }
  useEffect(() => {
    Taro.eventCenter.on("enentmineListRefresh", function () {
      refresh()
    })
    setPagingParams({ type: tabVal })
    initPagingQuery(false)
    return () => {
      Taro.eventCenter.off("enentmineListRefresh")
    }
  }, [tabVal])

  function onOrderRefund(val: TypeOrderList.Item) {
    onRefund(val).then(() => {
      refresh()
    })
  }
  function onOrderDetail(val: TypeOrderList.Item) {
    toVerificationTicket(val)
  }
  return <View className="mine-page bg-page">
    <XmNavbar title="我的门票" fixed={false}></XmNavbar>
    <Tabs theme="card" className="mine-top-tabs" value={tabVal} onChange={setTabVal}>
      {tabList.map(v => <Tabs.TabPane title={v.title} value={v.type} key={v.type}></Tabs.TabPane>)}
    </Tabs>
    <XmPullRefresh refresherLoading={pagingInfo.refresherLoading} onRefresh={initPagingQuery} onToLower={loadPagingMore} navigationStyle="custom" renderButtom={<XmTabbar />}>
      {pagingInfo.data.map((val, idx) => <View className="card-item flex flex-s bg-white" key={idx} onClick={(e) => { e.stopPropagation(); onOrderDetail(val) }}>
        <View className="card-left">
          <View className="title flex">
            <View className="name s-lg c-black f-weight-bold">玄妙观门票</View>
            <View><Text className="s-sm c-gray-6">日期</Text> <Text className="s-sm-2 c-gray-7">{dayjs(Number(val.time) * 1000).format("YYYY-MM-DD")}</Text></View>
          </View>
          <View className="itm flex">
            <View className="tit s-sm c-gray-6">购票时间：</View>
            <View className="s-sm-2 c-gray-7">{dayjs(Number(val.pay_time) * 1000).format("YYYY-MM-DD HH:mm:ss")}</View>
          </View>
          <View className="itm flex">
            <View className="tit s-sm c-gray-6">订单号：</View>
            <View className="s-sm-2 c-gray-7">{val.no}</View>
          </View>
        </View>
        <View className="card-right flex flex-column flex-align-c">
          <View className="s-lg c-black f-weight-bold">{val.num}张</View>
          {getButtonTxt(val)?.text && <View className="btn s-sm t-center" onClick={(e) => { e.stopPropagation(); toVerificationTicket(val) }}>{getButtonTxt(val)?.text}</View>}
          {val.refund === 1 && <View className="s-xs c-gray-6" onClick={(e) => { e.stopPropagation(); onOrderRefund(val) }}>申请退款</View>}
        </View>
      </View>)}
      <XmNoData {...pagingInfo} title="暂无数据" />
    </XmPullRefresh>
  </View>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
